/**
 * 管理员单词详细信息页面
 * @author 韩睿倩
 */
<template>
    <div>
        <el-page-header @back="goBack" content="单词详情页面">
        </el-page-header>
        <el-card>
            <!-- 详细信息 -->
            <el-descriptions title="详细信息" :column=1>
                <el-descriptions-item label="单词">{{
                        wordInfoTable.wordSpell
                }}</el-descriptions-item>
                <el-descriptions-item label="中文释义">{{
                        wordInfoTable.paraphrase
                }}</el-descriptions-item>
                <el-descriptions-item label="音标">{{
                        wordInfoTable.soundmark
                }}</el-descriptions-item>
            </el-descriptions>

            <!-- 修改删除按钮 -->
            <el-button type="primary" round @click="update">编辑信息</el-button>
            <el-button type="danger" round @click="del">删除单词</el-button>

            <!-- 编辑弹框 -->
            <el-dialog title="信息修改" :visible.sync="dialogVisible" @close="changeClose">


                <el-form ref="wordInfoTable" label-width="100px" :rules="rules" :model="wordInfoTable">
                    <el-form-item label="单词" prop="worSpell">
                        <el-input v-model="wordInfoTable.wordSpell"></el-input>
                    </el-form-item>
                    <el-form-item label="中文释义" prop="paraphase">
                        <el-input v-model="wordInfoTable.paraphrase" autosize></el-input>
                    </el-form-item>
                    <el-form-item label="音标" prop="soundmark">
                        <el-input v-model="wordInfoTable.soundmark"></el-input>
                    </el-form-item>


                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelEdit">取消</el-button>
                    <el-button type="primary" @click="updateWordInfo">确定</el-button>
                </span>
            </el-dialog>

            <!-- 删除弹框 -->
            <el-dialog title="删除单词" :visible.sync="deleteDialogVisible" @close="deleteClose">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="密码" prop="adminPassword">
                        <el-input type="password" v-model="ruleForm.adminPassword" clearable></el-input>
                    </el-form-item>
                    <!-- <el-form-item>
          <el-button type="primary" @click="delSuccess('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item> -->
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelDelete">取消</el-button>
                    <el-button type="primary" @click="delSuccess">确定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>

import { getWordDetailAdmin, updateWordInfo, deleteWord } from "../../api/administrator/thesaurusModuleApi"
export default {
    inject: ["reload"],
    name: "wordInfoPage",
    data() {
        return {
            wordInfoTable: {

                wordSpell: "",
                paraphrase: "",
                soundmark: "",

            },
            ruleForm: {
                adminPassword: ''
            },
            dialogVisible: false,
            deleteDialogVisible: false,
            rules: {
                wordSpell: [
                    { required: true, message: "请输入单词", trigger: "blur" },//待增加格式判断

                ],
                paraphrase: [{ required: true, message: "请输入中文释义", trigger: "blur" },],

                soundmark: [
                    { required: true, message: "请输入音标", trigger: "blur" },

                ],
                adminPassword: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    
                ],


            },
        }
    },
    methods: {
        //编辑按钮
        update() {
            this.dialogVisible = true;
        },
        cancelDelete() {
            this.deleteDialogVisible = false;
        },
        //删除按钮
        del() {
            this.deleteDialogVisible = true;
        },
        //监听表单重置
        changeClose() {
            this.$refs.wordInfoTable.resetFields()
        },
        deleteClose() {
            this.$refs.ruleForm.resetFields()
        },
        goBack() {
            console.log('go back');
            this.$router.push('/administratorHome/thesaurusModule')
        },

        //删除确定
        delSuccess() {
            console.log(this.wordId)
            console.log(this.adminId)
            console.log(this.ruleForm.adminPassword)
            deleteWord(this.wordId, { adminId: Number(this.adminId), adminPassword: this.ruleForm.adminPassword }).then((res) => {
                if (res.resultCode == 200) {
                    this.$message.success('删除单词成功')
                    console.log("删除成功")
                    console.log(res)
                    this.deleteDialogVisible = false
                    this.$router.push('/administratorHome/thesaurusModule')
                }
                else if (res.resultCode != 200) {
                    this.$message.error('密码错误');
                    this.reload()
                }


            }).catch((err) => {
                console.log("删除失败")
                console.log(err)
            })
            
            
        },

        //取消编辑
        cancelEdit() {
            this.dialogVisible = false;
            console.log("取消修改")
            this.reload()
        },
        //确定修改
        updateWordInfo() {
            console.log("updateWordInfo success")
            console.log(Number(this.wordId))
            this.$refs.wordInfoTable.validate(valid => {
                if (valid) {
                    this.loading = true;
                    // this.userInfoTable['userId'] = this.userId;
                    // console.log(this.userId,this.userInfoTable)
                    updateWordInfo(this.wordId, this.wordInfoTable).then(res => {
                        console.log(res.data);
                        // 根据返回结果状态码判断
                        if (res.resultCode != 200) {
                            return this.$message.error('修改单词信息失败')
                        }

                        //关闭对话框
                        this.dialogVisible = false;
                        //刷新页面，重新获取数据    
                        this.reload();
                        // 确认修改成功
                        this.$message.success('修改单词信息成功')
                    }).catch(() => { }).then(() => { this.loading = false; })
                }
            })


        }


    },
    computed: {
        wordId() {
            return this.$store.getters.wordIdAdmin;
        },
        adminId() {
            return this.$store.getters.userId;
        },

    },
    created() {
        console.log("okk11111kkk")
        console.log(this.wordId)
        // console.log(this.checkInfo)
        getWordDetailAdmin(this.wordId)
            .then((res) => {
                console.log(res)
                console.log(res.data);
                this.wordInfoTable = res.data;
            })
            .catch((err) => {
                console.log("失败")
                console.log(err);
            });
        console.log("okkkkk")
    },


}
</script>

<style>
.el-card {
    width: 600px;
    margin: auto;
    margin-top: 20px;

}

.el-descriptions {
    font-size: 25px;
}

.el-dialog {
    font-size: 30px;
}

.el-page-header {
    height: 50px;
    align-content: center;
    font-size: 30px;

}
</style>
<style lang="scss">
.el-dialog__body {
    padding: 30px 20px;
    color: #606266;
    font-size: 30px;
    word-break: break-all;
}

.el-descriptions__title {
    font-size: 25px;
    font-weight: 700;
}

.el-dialog__title {
    line-height: 24px;
    font-size: 25px;
    color: #303133;
}

.el-page-header {
    display: flex;
    line-height: 50px;
    font-size: 50px;
}

.el-page-header__content {
    font-size: 20px;
    color: #303133;
}

.el-page-header__title {
    font-size: 20px;
    font-weight: 500;
}
</style>